<template>
    <div class="main">
        <div class="header">
            <img style="height: 90%;border-radius: 50%;" src="../../assets/touxiang.jpg">
            <div class="header-text">
                <span style="font-size: 20px;">hi,{{ username }}</span>
                <span style="font-size: 30px;font-weight: 700;">欢迎回来！</span>
            </div>
        </div>
        <div class="main-body">

        </div>
    </div>
</template>
    
<script setup  name="Home">
    import {ref} from 'vue'
    const username = ref(localStorage.getItem('userName'))
    
</script>
    
<style scoped>
    .main{
        width:100%;
        height: 98.3vh;
        display: flex;
        flex-direction: column;
    }
    .header{
        height: 10%;
        margin-top: 1.8%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .main-body{
        height: 80%;
        background-color: bisque;
        margin-top: 1%;
    }
    .header-text{
        margin-left: 2%;
        display: flex;
        flex-direction: column;
    }
    
</style>
